<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布帖子 - 在线论坛</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../elementui/elementui.css">
  <link rel="stylesheet" href="../../css/font-awesome.min.css">
  <link href="quill.css" rel="stylesheet">
  <style>
  .add-update-preview .el-form-item .el-form-item__label {
    padding: 0 10px 0 0;
    color: #666;
    font-weight: 500;
    width: 180px;
    font-size: 14px;
    line-height: 40px;
    text-align: right;
  }
  
  .add-update-preview .el-form-item .el-form-item__content {
    margin-left: 180px;
  }
  
  .add-update-preview .el-input .el-input__inner {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 12px;
    box-shadow: 0 0 0px rgba(64, 158, 255, .5);
    outline: none;
    color: #666;
    background: #fff;
    width: 400px;
    font-size: 14px;
    height: 40px;
    transition: all 0.3s;
  }
  
  .add-update-preview .el-input .el-input__inner:focus {
    border-color: #F5BB00;
    box-shadow: 0 0 8px rgba(245, 187, 0, 0.2);
  }
  
  .add-update-preview .el-select .el-input__inner {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 10px;
    box-shadow: 0 0 0px rgba(64, 158, 255, .5);
    outline: none;
    color: #666;
    background: #fff;
    width: 200px;
    font-size: 14px;
    height: 40px;
  }
  
  .add-update-preview .el-date-editor .el-input__inner {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 10px 0 30px;
    box-shadow: 0 0 0px rgba(64, 158, 255, .5);
    outline: none;
    color: #666;
    background: #fff;
    width: 200px;
    font-size: 14px;
    height: 40px;
  }
  
  .add-update-preview .el-upload--picture-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    line-height: initial;
    vertical-align: middle;
  }
  
  .add-update-preview .upload .upload-img {
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 6px;
    color: #999;
    background: #fff;
    width: 200px;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    height: 100px;
  }
  
  .add-update-preview .el-upload-list .el-upload-list__item {
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 6px;
    color: #999;
    background: #fff;
    width: 200px;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    height: 100px;
  }
  
  .add-update-preview .el-upload .el-icon-plus {
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 6px;
    color: #999;
    background: #fff;
    width: 200px;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    height: 100px;
  }
  
  .add-update-preview .el-textarea .el-textarea__inner {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 0 0px rgba(64, 158, 255, .5);
    outline: none;
    color: #666;
    background: #fff;
    width: 400px;
    font-size: 14px;
    height: 120px;
  }
  
  /* 富文本编辑器样式 */
  .ql-editor {
    min-height: 200px;
  }
  
  .ql-toolbar.ql-snow {
    border: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  
  .ql-container.ql-snow {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
  }
  
  /* 表单容器样式 */
  .form-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    padding: 20px;
  }
  
  /* 按钮样式优化 */
  .btn-container .el-button {
    transition: all 0.3s;
  }
  
  .btn-container .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .btn-container .el-button--primary:hover {
    box-shadow: 0 2px 8px rgba(245, 187, 0, 0.3);
  }
  
  /* 抽取的行内样式 */
  .main-container {
    width: 100%;
    margin: 0px auto;
    position: relative;
    background: #fff;
    height: auto;
    min-height: 800px;
  }
  
  .section-title {
    margin: 10px 0;
    color: #fff;
    text-align: center;
    background: #333;
    width: 100%;
    font-size: 20px;
    line-height: 54px;
    border-radius: 8px 8px 0 0;
  }
  
  .back-button-container {
    padding: 20px 7%;
    margin: 0px auto;
    border-color: #ddd;
    border-radius: 0px;
    background: none;
    border-width: 0 0 1px;
    width: 100%;
    border-style: solid;
  }
  
  .form-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #F5BB00;
  }
  
  .form-item-style {
    padding: 10px;
    margin: 0 0 10px;
    background: none;
  }
  
  .form-item-content-style {
    min-height: 200px;
    border: 0;
    outline: none;
    color: #333;
    border-radius: 4px;
    width: 100%;
    line-height: 32px;
    font-size: 14px;
  }
  
  .submit-button {
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0 20px 0 0;
    outline: none;
    color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    background: #F5BB00;
    width: 128px;
    line-height: 40px;
    font-size: 14px;
    height: 40px;
  }
  
  .reset-button {
    border: 0px solid rgba(64, 158, 255, 1);
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    color: #fff;
    border-radius: 4px;
    background: #333;
    width: 128px;
    line-height: 40px;
    font-size: 14px;
    height: 40px;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="main-container">
      <div class="section-title">在线论坛</div>
      <div class="back-button-container">
        <el-button size="mini" @click="backClick">返回</el-button>
      </div>
      <div class="form-container">
        <h2 class="form-title">{{isEdit ? '编辑帖子' : '发布新帖'}}</h2>
        <el-form class="add-update-preview" :model="form" :rules="rules" ref="form" label-width="180px">
          <el-form-item class="form-item-style" label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item class="form-item-style" label="类型" prop="isdone">
            <el-radio-group v-model="form.isdone">
              <el-radio label="开放">公开</el-radio>
              <el-radio label="关闭">私人</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="form-item-style" label="内容" prop="content">
            <div
                class="form-item-content-style"
                id="editor" 
                class="editor" 
                contenteditable="true"
                placeholder="请输入内容...">
            </div>
          </el-form-item>
          <el-form-item class="form-item-style btn-container">
            <el-button class="submit-button" type="primary" @click="submitForm('form')">{{isEdit ? '修改' : '发布帖子'}} </el-button>
            <el-button class="reset-button" @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

  <!-- 引入JS -->
  <script src="../../js/vue.js"></script>
  <script src="axios.js"></script>
  <script src="../../elementui/elementui.js"></script>
  <script src="quill.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          form: {
            title: '',
            isdone: '开放',
            content: '',
            parentid: 0,
            userid: localStorage.getItem('userid'),
            username: localStorage.getItem('adminName'),
            toptime: ''
          },
          quill: null,
          isEdit: false,
          rules: {
            title: [
              { required: true, message: '请输入标题', trigger: 'blur' }
            ]
          }
        }
      },
      created() {
        // 从URL获取id参数，判断是否为编辑模式
        const urlParams = new URLSearchParams(window.location.search);
        const id = urlParams.get('id');
        if (id) {
          this.isEdit = true;
          this.getForumDetail(id);
        }
      },
      mounted() {
        // 初始化富文本编辑器
        this.initQuillEditor();
      },
      methods: {
        // 返回按钮
        backClick() {
          history.back();
        },
        // 初始化富文本编辑器
        initQuillEditor() {
          const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['image', 'video']
          ];
          
          // 替换编辑器元素
          const editorContainer = document.createElement('div');
          editorContainer.id = 'quill-editor';
          document.getElementById('editor').replaceWith(editorContainer);
          
          // 创建Quill实例
          this.quill = new Quill('#quill-editor', {
            modules: {
              toolbar: toolbarOptions
            },
            placeholder: '请输入内容...',
            theme: 'snow'
          });
          
          // 监听编辑器内容变化
          this.quill.on('text-change', () => {
            this.form.content = this.quill.root.innerHTML;
          });
        },
        // 获取论坛详情（编辑模式）
        getForumDetail(id) {
          axios.get(`http://localhost:8080/springboot1a8gh/forum/detail/${id}`,{
            headers: {
              'Token': localStorage.getItem("Token")
            }
          }).then(res => {
            if (res.data.code == 0) {
              this.form = res.data.data;
              
              // 设置编辑器内容
              if (this.quill && this.form.content) {
                this.quill.root.innerHTML = this.form.content;
              }
            }
          });
        },
        // 获取当前日期时间
        getCurDateTime() {
          const now = new Date();
          const year = now.getFullYear();
          const month = (now.getMonth() + 1).toString().padStart(2, '0');
          const day = now.getDate().toString().padStart(2, '0');
          const hours = now.getHours().toString().padStart(2, '0');
          const minutes = now.getMinutes().toString().padStart(2, '0');
          const seconds = now.getSeconds().toString().padStart(2, '0');
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        // 提交表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // 获取编辑器内容
              if (this.quill) {
                this.form.content = this.quill.root.innerHTML;
              }
              
              if (!this.isEdit) {
                this.form.toptime = this.getCurDateTime();
              }
              
              const url = this.isEdit ? 'update' : 'add';
              axios.post(`http://localhost:8080/springboot1a8gh/forum/${url}`, this.form,{
                headers: {
                  'Token': localStorage.getItem("Token")
                }
              }).then(res => {
                if (res.data.code === 0) {
                  this.$message({
                    message: `${this.isEdit ? '修改' : '发布'}成功`,
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      if (this.isEdit) {
                        window.location.href = '../myForumList.html';
                      } else {
                        window.location.href = '../list.html';
                      }
                    }
                  });
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            } else {
              return false;
            }
          });
        },
        // 重置表单
        resetForm(formName) {
          this.$refs[formName].resetFields();
          if (this.quill) {
            this.quill.root.innerHTML = '';
          }
        }
      }
    });
  </script>
</body>
</html>
